<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
*{
	padding:0;
	margin:0;
}

.status{
	position: fixed;
	border: 1px solid #999;
	left: -1px;
	top: -1px;
	border-radius: 0 0 10px 0;
	padding: 15px 30px;
	box-shadow: 2px 2px 9px -3px #000;
	-webkit-transition:0.25s all ease-in-out;
}

.status:hover{
	background: #55B949;
}

.connectTo{
	position: absolute;
	margin: 50%;
	width: 350px;
	height: 200px;
	font-weight: bold;
	left: -175px;
	top: -100px;
	text-align: center;
	line-height: 75px;
	border-radius: 10px;
	background: #55B949;
	box-shadow: 0px 0px 11px -1px #000;
}

input{
	padding:0px 10px;
	margin:0 20px;
}
input.code{
	font-size: 2em;
	width: 100px;
	padding: 0px 0px;
	margin: 0 20px;
}

.messages{
margin: 0 auto;
position: relative;
width: 200px;
box-shadow: 0px 0px 5px 0px #000;
border-radius: 0 0 5px 5px;
padding: 15px
}
</style>
<script src="http://46.19.36.112:8080/socket.io/socket.io.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title> Server </title>
<script type='text/javascript'>
//make player
	var PlayerObject = function(options){
		this.ctor(options);
	}
	
	PlayerObject.prototype.ctor = function(){
		if(!getCookie('klmz-guess-uid')){
			setCookie('klmz-guess-uid', getID(25), 5);
		}
		this.UID = getCookie('klmz-guess-uid')
		this.conStatus = { 'connected' : false};
		this.conStatus.connected = false;
		console.log(this);
	}
	
	//Register player to game
	PlayerObject.prototype.registerToGame = function(name, code){
		console.log(this.UID);
		socket.emit('execFunction', {'fnName' : 'registerPlayer', 'type' : 'client', 'args': { 'code' : code, 'name' : name , 'uID' : this.UID}});
	}
	
	//send that the question is right
	PlayerObject.prototype.sendQRight = function(){
	}
	
	//Start dice rolling
	PlayerObject.prototype.sendThrowDice = function(){
	}
	
	//Start timer to start guessing
	PlayerObject.prototype.startGuess = function(){
	}
	
	//Time's up! end game
	PlayerObject.prototype.endGuess= function(){
	}
	
	var socket = io.connect('http://46.19.36.112:8080');
	var me;
	socket.on('connect',function() {
		me = new PlayerObject();
		$('#status').html('Server online');
		//socket.emit('nodeConnect', {type : 'client', 'uid' : me.UID});
		socket.on('execFunction', function(data){
			console.log('execFunction');
			if(me)
				executeFunctionByName(data.fnName, me, data.args);
		});
		socket.on('conStatus', function(data){
			me.conStatus = data;
			if(me.conStatus.connected){
				$("#connectTo").fadeOut();
				$('#status').html('Connected to board.');
			}
		});
		
	});
	
	
	
	$(document).ready(function(){
			$("#connect").click(function(){
				if(!me.conStatus.connected){
					console.log('trying to connect');
					var code = $('#codeInput').val();
					var name = $('#nameInput').val();
					me.registerToGame(name, code);
					//$("#connectTo").fadeOut();
				}else{
					alert('Already connected');
				}
			});
	});
	
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}
function setCookie(c_name,value,exdays)
{
	var exdate=new Date();
	exdate.setDate(exdate.getDate() + exdays);
	var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
	document.cookie=c_name + "=" + c_value;
}
function executeFunctionByName(functionName, context , args) {
  var args = Array.prototype.slice.call(arguments).splice(2);
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  }
  return context[func].apply(this, args);
}
function getID(length){
	sPassword = "";
    for (i=0; i < length; i++) {
        numI = getRandomNum();
        sPassword = sPassword + numI;
	}

    return sPassword;
}
function getRandomNum() {

    // between 0 - 1
    var rndNum = Math.random()

    // rndNum from 0 - 1000
    //rndNum = parseInt(rndNum * 1000);

    // rndNum from 33 - 127
    //rndNum = (rndNum % 94) + 33;
	rndNum = parseInt(rndNum*8)+1;
    return rndNum;
}
</script>
</head>
<body>
<div id='status' class='status'>
</div>
<div id='messages' class='messages'>
</div>
<div id='cards' class='cards'>
</div>
<div id='connectTo' class='connectTo'>
<label for='code'>name</label><input type='text' id='nameInput'>
<br>
<label for='code'>Code</label><input type='number' class='code' id='codeInput'>
<br>
<input type='button' id='connect' value='Connect!'>
</div>
</body>
</html>